<template>
	<view class="popup-page">
		<comMask v-model="isSetShowPopup"></comMask>
		<view
			:class="['fixed', 'popup-content', 'flex-direction-column', isSetShowPopup ? 'popup-show' : '']"
			:style="{
				'height': popupOfHeight,
				'max-height': popupOfMaxHeight
			}"
		>
			<view class="content-head">
				<slot name="header"></slot>
			</view>
			
			<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="conPopupBg || `${commonConfigs.domainFrontFileLink}/files/images/popup/popup-bg.png`" style="border-radius: 26rpx 26rpx 0 0" class="bg" mode=""></image>

			<view :class="['popup-name', title ? 'relative' : 'absolute']">
				<!-- <image v-if="commonConfigs && commonConfigs.domainFrontFileLink && title" :src="conPopupBg || `${commonConfigs.domainFrontFileLink}/files/images/popup/popup-top-bg.png`"
				class="bg" mode=""></image> -->
				<image class="absolute popup-btn-close" v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/popup/popup-close.png`" mode="" @click="clickCloseFun"></image>
				<view v-if="title" class="relative flex-all-center" style="width: 100%;height: 100rpx;text-align: center;">
					{{ title }}
				</view>
				<view v-else style="height: 30rpx;"></view>
			</view>
			
			<view class="relative flex-full popup-view">
				<slot></slot>
			</view>

			<view class="content-bottom relative">
				<view class="relative">
					<slot name="footer"></slot>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'comPopup',
		props: {
			value: {
				type: Boolean,
				default: () => true
			},
			title: {
				type: String,
				default: () => ''
			},
			conPopupBg: {
				type: String,
				default: () => ''
			},
			popupOfHeight: {
				type: String,
				default: () => 'auto'
			},
			popupOfMaxHeight: {
				type: String,
				default: () => '1100rpx'
			},
		},
		data() {
			return {};
		},
		computed: {
			commonConfigs() {
				return this.$store.getters.commonConfigs || {};
			},
			isSetShowPopup: {
				get() {
					return this.value;
				},
				set(v) {
					this.$emit('input', v);
				}
			},
		},
		methods: {
			clickCloseFun() {
				this.isSetShowPopup = false;
			}
		},
		options: {
			virtualHost: false
		}
	};
</script>

<style scoped lang="scss">
	.popup-content {
		z-index: 10000;
		left: 0;
		width: 100%;
		transform: translateY(calc(100% + 98rpx));
		transition: 0.4s all;
		background-color: #000;
		bottom: 0;
		
		&.popup-show {
			transform: translateY(0%);
		}
		
		.popup-name {
			width: 100%;
			height: 100rpx;
			// padding-left: 64rpx;
			font-weight: 800;
			color: #FFF;
			font-size: 34rpx;
		}
		.popup-btn-close {
			top: 20rpx;
			right: 30rpx;
			z-index: 100;
			width: 50rpx;
			height: 52rpx;
		}
		.popup-view {
			// margin-top: 26rpx;
			overflow: auto;
		}
		.content-bottom {
			padding: 30rpx;
			bottom: 0;
		}
	}
</style>
